<html>

<head>
    <title>路由</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.global.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <router-link to="/home">Home</router-link>
        <br>
        <router-link to="/about">About</router-link>
        <router-view></router-view>
    </div>

    <script>  
        const { createApp } = Vue;
        const { createRouter, createWebHashHistory } = VueRouter;
        
        // 定义组件
        const Home = { template: '<h1>Home Page</h1>' };
        const About = { template: '<h1>About Page</h1>' };
        
        // 定义路由
        const routes = [
            { path: '/home', component: Home },
            { path: '/about', component: About },
            { path: '/', redirect: '/home' } // 添加默认重定向
        ];
        
        // 创建路由器实例
        const router = createRouter({
            history: createWebHashHistory(),
            routes
        });
        
        // 创建Vue应用并使用路由器
        const app = createApp({
            data() {
                return {
                    message: 'Hello Vue Router!'
                }
            }
        });
        
        app.use(router);
        app.mount('#app');
    </script>
</body>

</html>